<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Ext.BoxComponent</title>
        <link rel="stylesheet" type="text/css" href="../resources/reset.css"/>
        <link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="../resources/print.css" media="print">
        <!-- GC -->
    </head>
    <body>
            <div class="body-wrap">
        <div class="top-tools">
        	<img src="../resources/print.gif" width="16" height="16" align="absmiddle">&nbsp;<a href="Ext.BoxComponent.html" target="_blank">Print Friendly</a><br/>

        </div>
        <h1>Class Ext.BoxComponent</h1>
        <table cellspacing="0">
            <tr><td class="label">Package:</td><td>Ext</td></tr>
            <tr><td class="label">Class:</td><td>BoxComponent</td></tr>
                        <tr><td class="label">Extends:</td><td><a ext:cls="Ext.Component" ext:member="" href="Ext.Component.html">Component</a></td></tr>
                                    <tr><td class="label">Subclasses:</td><td><a ext:cls="Ext.form.Field" href="Ext.form.Field.html">Field</a></td></tr>
                        <tr><td class="label">Defined In:</td><td><a href="BoxComponent.jss.html">BoxComponent.js</a></td></tr>
        </table>
        <div class="description">
            Base class for any visual <a ext:cls="Ext.Component" href="Ext.Component.html">Ext.Component</a> that uses a box container.  BoxComponent provides automatic box
model adjustments for sizing and positioning and will work correctly withnin the Component rendering model.  All
container classes should subclass BoxComponent so that they will work consistently when nested within other Ext
layout containers.        </div>
        <br />
        	<a href="#properties">Properties</a>
			&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#methods">Methods</a>
			&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#events">Events</a>
        	        	&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#configs">Config Options</a>
        	        <hr />
        <a name="properties"></a>
        <h2>Public Properties</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Property</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#disabled">disabled</a> : Object</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#disabled" href="Ext.Component.html#disabled">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">true if this component is disabled. Read-only.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#hidden">hidden</a> : Object</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#hidden" href="Ext.Component.html#hidden">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">true if this component is hidden. Read-only.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#rendered">rendered</a> : Object</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#rendered" href="Ext.Component.html#rendered">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">true if this component has been rendered. Read-only.</td>
    </tr>
            </table>
                <a name="methods"></a>
        <h2>Public Methods</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Method</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><b>BoxComponent</b>(&nbsp;<code>Ext.Element/String/Object config</code>&nbsp;)</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="">
        <td class="mdesc"></td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#addEvents">addEvents</a>(&nbsp;<code>Object object</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="Ext.util.Observable.html#addEvents">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Used to define events on this Observable</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#addListener">addListener</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#addListener" href="Ext.util.Observable.html#addListener">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Appends an event handler to this component</td>
    </tr>
        <tr class=" inherited alt" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#destroy">destroy</a>() : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#destroy" href="Ext.Component.html#destroy">Component</a></td>
    </tr>
    <tr class=" inherited alt" expandable>
        <td class="mdesc">Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the c...</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#disable">disable</a>() : Ext.Component</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#disable" href="Ext.Component.html#disable">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Disable this component.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#enable">enable</a>() : Ext.Component</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#enable" href="Ext.Component.html#enable">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Enable this component.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#fireEvent">fireEvent</a>(&nbsp;<code>String eventName</code>, <code>Object... args</code>&nbsp;) : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="Ext.util.Observable.html#fireEvent">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires the specified event with the passed parameters (minus the event name).</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#focus">focus</a>(&nbsp;<code>Boolean selectText</code>&nbsp;) : Ext.Component</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#focus" href="Ext.Component.html#focus">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Try to focus this component.</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getBox">getBox</a>(&nbsp;<span class="optional" title="Optional">[<code>Boolean local</code>]</span>&nbsp;) : s</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="">
        <td class="mdesc">Gets the current box measurements of the component's underlying element.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getEl">getEl</a>() : Ext.Element</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#getEl" href="Ext.Component.html#getEl">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Returns the underlying <a ext:cls="Ext.Element" href="Ext.Element.html">Ext.Element</a>.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getId">getId</a>() : String</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#getId" href="Ext.Component.html#getId">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Returns the id of this component.</td>
    </tr>
        <tr class=" alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getPosition">getPosition</a>(&nbsp;<span class="optional" title="Optional">[<code>Boolean local</code>]</span>&nbsp;) : Array</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class=" alt">
        <td class="mdesc">Gets the current XY position of the component's underlying element.</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getSize">getSize</a>() : Object</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="">
        <td class="mdesc">Gets the current size of the component's underlying element.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#hasListener">hasListener</a>(&nbsp;<code>String eventName</code>&nbsp;) : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="Ext.util.Observable.html#hasListener">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Checks to see if this object has any listeners for a specified event</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#hide">hide</a>() : Ext.Component</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#hide" href="Ext.Component.html#hide">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Hide this component.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#isVisible">isVisible</a>() : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#isVisible" href="Ext.Component.html#isVisible">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Returns true if this component is visible.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#on">on</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#on" href="Ext.util.Observable.html#on">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Appends an event handler to this element (shorthand for addListener)</td>
    </tr>
        <tr class=" alt" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#onPosition">onPosition</a>(&nbsp;<code>Number x</code>, <code>Number y</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class=" alt" expandable>
        <td class="mdesc">Called after the component is moved, this method is empty by default but can be implemented by any
subclass that need...</td>
    </tr>
        <tr class="" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#onResize">onResize</a>(&nbsp;<code>Number adjWidth</code>, <code>Number adjHeight</code>, <code>Number rawWidth</code>, <code>Number rawHeight</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="" expandable>
        <td class="mdesc">Called after the component is resized, this method is empty by default but can be implemented by any
subclass that ne...</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#purgeListeners">purgeListeners</a>() : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="Ext.util.Observable.html#purgeListeners">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Removes all listeners for this object</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#removeListener">removeListener</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="Ext.util.Observable.html#removeListener">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Removes a listener</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#render">render</a>(&nbsp;<span class="optional" title="Optional">[<code>String/HTMLElement/Element container</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#render" href="Ext.Component.html#render">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">If this is a lazy rendering component, render it to its container element.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#setDisabled">setDisabled</a>(&nbsp;<code>Boolean disabled</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#setDisabled" href="Ext.Component.html#setDisabled">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Convenience function for setting disabled/enabled by boolean.</td>
    </tr>
        <tr class=" alt" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#setPagePosition">setPagePosition</a>(&nbsp;<code>Number x</code>, <code>Number y</code>&nbsp;) : s</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class=" alt" expandable>
        <td class="mdesc">Sets the page XY position of the component.  To set the left and top instead, use setPosition.
This method fires the ...</td>
    </tr>
        <tr class="" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#setPosition">setPosition</a>(&nbsp;<code>Number left</code>, <code>Number top</code>&nbsp;) : s</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="" expandable>
        <td class="mdesc">Sets the left and top of the component.  To set the page XY position instead, use setPagePosition.
This method fires ...</td>
    </tr>
        <tr class=" alt" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#setSize">setSize</a>(&nbsp;<code>Number/Object width</code>, <code>Number height</code>&nbsp;) : Ext.BoxComponent</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class=" alt" expandable>
        <td class="mdesc">Sets the width and height of the component.  This method fires the resize event.  This method can accept
either width...</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#setVisible">setVisible</a>(&nbsp;<code>Boolean visible</code>&nbsp;) : Ext.Component</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#setVisible" href="Ext.Component.html#setVisible">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Convenience function to hide or show this component by boolean.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#show">show</a>() : Ext.Component</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#show" href="Ext.Component.html#show">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Show this component.</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#syncSize">syncSize</a>() : s</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="">
        <td class="mdesc">Force the component's size to recalculate based on the underlying element's current height and width.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#un">un</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#un" href="Ext.util.Observable.html#un">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Removes a listener (shorthand for removeListener)</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#updateBox">updateBox</a>(&nbsp;<code>Object box</code>&nbsp;) : s</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="">
        <td class="mdesc">Sets the current box measurements of the component's underlying element.</td>
    </tr>
            </table>
                <a name="events"></a>
        <h2>Public Events</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Event</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-beforedestroy">beforedestroy</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-beforedestroy" href="Ext.Component.html#event-beforedestroy">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires before the component is destroyed. Return false to stop the destroy.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-beforehide">beforehide</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-beforehide" href="Ext.Component.html#event-beforehide">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires before the component is hidden. Return false to stop the hide.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-beforerender">beforerender</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-beforerender" href="Ext.Component.html#event-beforerender">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires before the component is rendered. Return false to stop the render.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-beforeshow">beforeshow</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-beforeshow" href="Ext.Component.html#event-beforeshow">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires before the component is shown.  Return false to stop the show.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-destroy">destroy</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-destroy" href="Ext.Component.html#event-destroy">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires after the component is destroyed.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-disable">disable</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-disable" href="Ext.Component.html#event-disable">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires after the component is disabled.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-enable">enable</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-enable" href="Ext.Component.html#event-enable">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires after the component is enabled.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-hide">hide</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-hide" href="Ext.Component.html#event-hide">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires after the component is hidden.</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-move">move</a> : (&nbsp;<code>Ext.Component this</code>, <code>Number x</code>, <code>Number y</code>&nbsp;)</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="">
        <td class="mdesc">Fires after the component is moved.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-render">render</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-render" href="Ext.Component.html#event-render">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires after the component is rendered.</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-resize">resize</a> : (&nbsp;<code>Ext.Component this</code>, <code>Number adjWidth</code>, <code>Number adjHeight</code>, <code>Number rawWidth</code>, <code>Number rawHeight</code>&nbsp;)</td>
        <td class="msource" rowspan="2">BoxComponent</td>
    </tr>
    <tr class="">
        <td class="mdesc">Fires after the component is resized.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-show">show</a> : (&nbsp;<code>Ext.Component this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#event-show" href="Ext.Component.html#event-show">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires after the component is shown.</td>
    </tr>
            </table>
                        <a name="configs"></a>
        <h2>Config Options</h2>
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Config Options</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-allowDomMove">allowDomMove</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#allowDomMove" href="Ext.Component.html#allowDomMove">Component</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Whether the component can move the Dom node when rendering (defaults to true).</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-disableClass">disableClass</a> : String</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#disableClass" href="Ext.Component.html#disableClass">Component</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">CSS class added to the component when it is disabled (defaults to "x-item-disabled").</td>
    </tr>
        <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-hideMode">hideMode</a> : String</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.Component" ext:member="#hideMode" href="Ext.Component.html#hideMode">Component</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">How this component should hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset posi...</td>
    </tr>
            </table>
                            <h2 class="mdetail-head">Property Details</h2>
            <div class="detail-wrap">
                            <a name="disabled"></a>
                <div class="mdetail">
                <h3>disabled</i></h3>
                <code>public Object disabled</code>
                <div class="mdetail-desc">
                    true if this component is disabled. Read-only.                </div>
                <div class="mdetail-def">This property is defined by <a ext:cls="Ext.Component" ext:member="#disabled" href="Ext.Component.html#disabled">Component</a>.</div>
                </div>
                            <a name="hidden"></a>
                <div class="mdetail alt">
                <h3>hidden</i></h3>
                <code>public Object hidden</code>
                <div class="mdetail-desc">
                    true if this component is hidden. Read-only.                </div>
                <div class="mdetail-def">This property is defined by <a ext:cls="Ext.Component" ext:member="#hidden" href="Ext.Component.html#hidden">Component</a>.</div>
                </div>
                            <a name="rendered"></a>
                <div class="mdetail">
                <h3>rendered</i></h3>
                <code>public Object rendered</code>
                <div class="mdetail-desc">
                    true if this component has been rendered. Read-only.                </div>
                <div class="mdetail-def">This property is defined by <a ext:cls="Ext.Component" ext:member="#rendered" href="Ext.Component.html#rendered">Component</a>.</div>
                </div>
                        </div>
        
                    <a name="BoxComponent"></a>
            <h2 class="mdetail-head">Constructor Details</h2>
            <div class="detail-wrap">
                <div class="mdetail">
                <h3>BoxComponent</i></h3>
                <code>public function BoxComponent(&nbsp;<code>Ext.Element/String/Object config</code>&nbsp;)</code>
                <div class="mdetail-desc">
                                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>config</code> : Ext.Element/String/Object<div class="sub-desc">The configuration options.</div></li>                    </ul>
                </div>
                </div>
                </div>
            </div>
        
                    <h2 class="mdetail-head">Method Details</h2>
            <div class="detail-wrap">
                            <a name="addEvents"></a>
                <div class="mdetail">
                <h3>addEvents</i></h3>
                <code>public function addEvents(&nbsp;<code>Object object</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Used to define events on this Observable
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>object</code> : Object<div class="sub-desc">The object with the events defined</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="Ext.util.Observable.html#addEvents">Observable</a>.</div>
                </div>
                            <a name="addListener"></a>
                <div class="mdetail alt">
                <h3>addListener</i></h3>
                <code>public function addListener(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Appends an event handler to this component
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handler
function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration
properties. This may contain any of the following properties:<ul>
<li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
<li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
<li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
<li>buffer {Number} Causes the handler to be scheduled to run in an <a ext:cls="Ext.util.DelayedTask" href="Ext.util.DelayedTask.html">Ext.util.DelayedTask</a> delayed
by the specified number of milliseconds. If the event fires again within that time, the original
handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
</ul><br>
<p>
<b>Combining Options</b><br>
Using the options argument, it is possible to combine different types of listeners:<br>
<br>
A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
		<pre><code>el.on(<em>'click'</em>, <b>this</b>.onClick, <b>this</b>, {
 			single: true,
    		delay: 100,
    		forumId: 4
		});</code></pre>
<p>
<b>Attaching multiple handlers in 1 call</b><br>
The method also allows for a single argument to be passed which is a config object containing properties
which specify multiple handlers.
<pre><code>el.on({
			<em>'click'</em>: {
        		fn: <b>this</b>.onClick,
        		scope: <b>this</b>,
        		delay: 100
    		}, 
    		<em>'mouseover'</em>: {
        		fn: <b>this</b>.onMouseOver,
        		scope: <b>this</b>
    		},
    		<em>'mouseout'</em>: {
        		fn: <b>this</b>.onMouseOut,
        		scope: <b>this</b>
    		}
		});</code></pre>
<p>
Or a shorthand syntax which passes the same scope object to all handlers:
 	<pre><code>el.on({
			<em>'click'</em>: <b>this</b>.onClick,
    		<em>'mouseover'</em>: <b>this</b>.onMouseOver,
    		<em>'mouseout'</em>: <b>this</b>.onMouseOut,
    		scope: <b>this</b>
		});</code></pre></div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#addListener" href="Ext.util.Observable.html#addListener">Observable</a>.</div>
                </div>
                            <a name="destroy"></a>
                <div class="mdetail">
                <h3>destroy</i></h3>
                <code>public function destroy()</code>
                <div class="mdetail-desc">
                    Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its <a ext:cls="Ext.Container" href="Ext.Container.html">Ext.Container</a> (if applicable) and unregistering it from <a ext:cls="Ext.ComponentMgr" href="Ext.ComponentMgr.html">Ext.ComponentMgr</a>.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#destroy" href="Ext.Component.html#destroy">Component</a>.</div>
                </div>
                            <a name="disable"></a>
                <div class="mdetail alt">
                <h3>disable</i></h3>
                <code>public function disable()</code>
                <div class="mdetail-desc">
                    Disable this component.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.Component</code><div class="sub-desc">this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#disable" href="Ext.Component.html#disable">Component</a>.</div>
                </div>
                            <a name="enable"></a>
                <div class="mdetail">
                <h3>enable</i></h3>
                <code>public function enable()</code>
                <div class="mdetail-desc">
                    Enable this component.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.Component</code><div class="sub-desc">this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#enable" href="Ext.Component.html#enable">Component</a>.</div>
                </div>
                            <a name="fireEvent"></a>
                <div class="mdetail alt">
                <h3>fireEvent</i></h3>
                <code>public function fireEvent(&nbsp;<code>String eventName</code>, <code>Object... args</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Fires the specified event with the passed parameters (minus the event name).
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc"></div></li><li><code>args</code> : Object...<div class="sub-desc">Variable number of parameters are passed to handlers</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="Ext.util.Observable.html#fireEvent">Observable</a>.</div>
                </div>
                            <a name="focus"></a>
                <div class="mdetail">
                <h3>focus</i></h3>
                <code>public function focus(&nbsp;<code>Boolean selectText</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Try to focus this component.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>selectText</code> : Boolean<div class="sub-desc">True to also select the text in this component (if applicable)</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.Component</code><div class="sub-desc">this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#focus" href="Ext.Component.html#focus">Component</a>.</div>
                </div>
                            <a name="getBox"></a>
                <div class="mdetail alt">
                <h3>getBox</i></h3>
                <code>public function getBox(&nbsp;<span class="optional" title="Optional">[<code>Boolean local</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Gets the current box measurements of the component's underlying element.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>local</code> : Boolean<div class="sub-desc">(optional) If true the element's left and top are returned instead of page XY (defaults to false)</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>s</code><div class="sub-desc">{Object} box An object in the format {x, y, width, height}</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="getEl"></a>
                <div class="mdetail">
                <h3>getEl</i></h3>
                <code>public function getEl()</code>
                <div class="mdetail-desc">
                    Returns the underlying <a ext:cls="Ext.Element" href="Ext.Element.html">Ext.Element</a>.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.Element</code><div class="sub-desc">The element</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#getEl" href="Ext.Component.html#getEl">Component</a>.</div>
                </div>
                            <a name="getId"></a>
                <div class="mdetail alt">
                <h3>getId</i></h3>
                <code>public function getId()</code>
                <div class="mdetail-desc">
                    Returns the id of this component.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>String</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#getId" href="Ext.Component.html#getId">Component</a>.</div>
                </div>
                            <a name="getPosition"></a>
                <div class="mdetail">
                <h3>getPosition</i></h3>
                <code>public function getPosition(&nbsp;<span class="optional" title="Optional">[<code>Boolean local</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Gets the current XY position of the component's underlying element.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>local</code> : Boolean<div class="sub-desc">(optional) If true the element's left and top are returned instead of page XY (defaults to false)</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Array</code><div class="sub-desc">The XY position of the element (e.g., [100, 200])</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="getSize"></a>
                <div class="mdetail alt">
                <h3>getSize</i></h3>
                <code>public function getSize()</code>
                <div class="mdetail-desc">
                    Gets the current size of the component's underlying element.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Object</code><div class="sub-desc">An object containing the element's size {width: (element width), height: (element height)}</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="hasListener"></a>
                <div class="mdetail">
                <h3>hasListener</i></h3>
                <code>public function hasListener(&nbsp;<code>String eventName</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Checks to see if this object has any listeners for a specified event
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="Ext.util.Observable.html#hasListener">Observable</a>.</div>
                </div>
                            <a name="hide"></a>
                <div class="mdetail alt">
                <h3>hide</i></h3>
                <code>public function hide()</code>
                <div class="mdetail-desc">
                    Hide this component.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.Component</code><div class="sub-desc">this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#hide" href="Ext.Component.html#hide">Component</a>.</div>
                </div>
                            <a name="isVisible"></a>
                <div class="mdetail">
                <h3>isVisible</i></h3>
                <code>public function isVisible()</code>
                <div class="mdetail-desc">
                    Returns true if this component is visible.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#isVisible" href="Ext.Component.html#isVisible">Component</a>.</div>
                </div>
                            <a name="on"></a>
                <div class="mdetail alt">
                <h3>on</i></h3>
                <code>public function on(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Appends an event handler to this element (shorthand for addListener)
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handler
function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional)</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#on" href="Ext.util.Observable.html#on">Observable</a>.</div>
                </div>
                            <a name="onPosition"></a>
                <div class="mdetail">
                <h3>onPosition</i></h3>
                <code>public function onPosition(&nbsp;<code>Number x</code>, <code>Number y</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Called after the component is moved, this method is empty by default but can be implemented by any
subclass that needs to perform custom logic after a move occurs.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>x</code> : Number<div class="sub-desc">The new x position</div></li><li><code>y</code> : Number<div class="sub-desc">The new y position</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="onResize"></a>
                <div class="mdetail alt">
                <h3>onResize</i></h3>
                <code>public function onResize(&nbsp;<code>Number adjWidth</code>, <code>Number adjHeight</code>, <code>Number rawWidth</code>, <code>Number rawHeight</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Called after the component is resized, this method is empty by default but can be implemented by any
subclass that needs to perform custom logic after a resize occurs.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>adjWidth</code> : Number<div class="sub-desc">The box-adjusted width that was set</div></li><li><code>adjHeight</code> : Number<div class="sub-desc">The box-adjusted height that was set</div></li><li><code>rawWidth</code> : Number<div class="sub-desc">The width that was originally specified</div></li><li><code>rawHeight</code> : Number<div class="sub-desc">The height that was originally specified</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="purgeListeners"></a>
                <div class="mdetail">
                <h3>purgeListeners</i></h3>
                <code>public function purgeListeners()</code>
                <div class="mdetail-desc">
                    Removes all listeners for this object
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="Ext.util.Observable.html#purgeListeners">Observable</a>.</div>
                </div>
                            <a name="removeListener"></a>
                <div class="mdetail alt">
                <h3>removeListener</i></h3>
                <code>public function removeListener(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Removes a listener
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="Ext.util.Observable.html#removeListener">Observable</a>.</div>
                </div>
                            <a name="render"></a>
                <div class="mdetail">
                <h3>render</i></h3>
                <code>public function render(&nbsp;<span class="optional" title="Optional">[<code>String/HTMLElement/Element container</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    If this is a lazy rendering component, render it to its container element.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>container</code> : String/HTMLElement/Element<div class="sub-desc">(optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#render" href="Ext.Component.html#render">Component</a>.</div>
                </div>
                            <a name="setDisabled"></a>
                <div class="mdetail alt">
                <h3>setDisabled</i></h3>
                <code>public function setDisabled(&nbsp;<code>Boolean disabled</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Convenience function for setting disabled/enabled by boolean.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>disabled</code> : Boolean<div class="sub-desc"></div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#setDisabled" href="Ext.Component.html#setDisabled">Component</a>.</div>
                </div>
                            <a name="setPagePosition"></a>
                <div class="mdetail">
                <h3>setPagePosition</i></h3>
                <code>public function setPagePosition(&nbsp;<code>Number x</code>, <code>Number y</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Sets the page XY position of the component.  To set the left and top instead, use <a ext:cls="Ext.BoxComponent" ext:member="setPosition" href="Ext.BoxComponent.html#setPosition">setPosition</a>.
This method fires the move event.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>x</code> : Number<div class="sub-desc">The new x position</div></li><li><code>y</code> : Number<div class="sub-desc">The new y position</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>s</code><div class="sub-desc">{Ext.BoxComponent} this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="setPosition"></a>
                <div class="mdetail alt">
                <h3>setPosition</i></h3>
                <code>public function setPosition(&nbsp;<code>Number left</code>, <code>Number top</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Sets the left and top of the component.  To set the page XY position instead, use <a ext:cls="Ext.BoxComponent" ext:member="setPagePosition" href="Ext.BoxComponent.html#setPagePosition">setPagePosition</a>.
This method fires the move event.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>left</code> : Number<div class="sub-desc">The new left</div></li><li><code>top</code> : Number<div class="sub-desc">The new top</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>s</code><div class="sub-desc">{Ext.BoxComponent} this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="setSize"></a>
                <div class="mdetail">
                <h3>setSize</i></h3>
                <code>public function setSize(&nbsp;<code>Number/Object width</code>, <code>Number height</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Sets the width and height of the component.  This method fires the resize event.  This method can accept
either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>width</code> : Number/Object<div class="sub-desc">The new width to set, or a size object in the format {width, height}</div></li><li><code>height</code> : Number<div class="sub-desc">The new height to set (not required if a size object is passed as the first arg)</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.BoxComponent</code><div class="sub-desc">this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="setVisible"></a>
                <div class="mdetail alt">
                <h3>setVisible</i></h3>
                <code>public function setVisible(&nbsp;<code>Boolean visible</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Convenience function to hide or show this component by boolean.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>visible</code> : Boolean<div class="sub-desc">True to show, false to hide</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.Component</code><div class="sub-desc">this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#setVisible" href="Ext.Component.html#setVisible">Component</a>.</div>
                </div>
                            <a name="show"></a>
                <div class="mdetail">
                <h3>show</i></h3>
                <code>public function show()</code>
                <div class="mdetail-desc">
                    Show this component.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.Component</code><div class="sub-desc">this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.Component" ext:member="#show" href="Ext.Component.html#show">Component</a>.</div>
                </div>
                            <a name="syncSize"></a>
                <div class="mdetail alt">
                <h3>syncSize</i></h3>
                <code>public function syncSize()</code>
                <div class="mdetail-desc">
                    Force the component's size to recalculate based on the underlying element's current height and width.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>s</code><div class="sub-desc">{Ext.BoxComponent} this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                            <a name="un"></a>
                <div class="mdetail">
                <h3>un</i></h3>
                <code>public function un(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Removes a listener (shorthand for removeListener)
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#un" href="Ext.util.Observable.html#un">Observable</a>.</div>
                </div>
                            <a name="updateBox"></a>
                <div class="mdetail alt">
                <h3>updateBox</i></h3>
                <code>public function updateBox(&nbsp;<code>Object box</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Sets the current box measurements of the component's underlying element.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>box</code> : Object<div class="sub-desc">An object in the format {x, y, width, height}</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>s</code><div class="sub-desc">{Ext.BoxComponent} this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BoxComponent.</div>
                </div>
                        </div>
        
                    <h2 class="mdetail-head">Event Details</h2>
            <div class="detail-wrap">
                            <a name="event-beforedestroy"></a>
                <div class="mdetail">
                <h3>beforedestroy</i></h3>
                <code>public event beforedestroy</code>
                <div class="mdetail-desc">
                Fires before the component is destroyed. Return false to stop the destroy.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-beforedestroy" href="Ext.Component.html#event-beforedestroy">Component</a>.</div>
                </div>
                            <a name="event-beforehide"></a>
                <div class="mdetail alt">
                <h3>beforehide</i></h3>
                <code>public event beforehide</code>
                <div class="mdetail-desc">
                Fires before the component is hidden. Return false to stop the hide.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-beforehide" href="Ext.Component.html#event-beforehide">Component</a>.</div>
                </div>
                            <a name="event-beforerender"></a>
                <div class="mdetail">
                <h3>beforerender</i></h3>
                <code>public event beforerender</code>
                <div class="mdetail-desc">
                Fires before the component is rendered. Return false to stop the render.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-beforerender" href="Ext.Component.html#event-beforerender">Component</a>.</div>
                </div>
                            <a name="event-beforeshow"></a>
                <div class="mdetail alt">
                <h3>beforeshow</i></h3>
                <code>public event beforeshow</code>
                <div class="mdetail-desc">
                Fires before the component is shown.  Return false to stop the show.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-beforeshow" href="Ext.Component.html#event-beforeshow">Component</a>.</div>
                </div>
                            <a name="event-destroy"></a>
                <div class="mdetail">
                <h3>destroy</i></h3>
                <code>public event destroy</code>
                <div class="mdetail-desc">
                Fires after the component is destroyed.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-destroy" href="Ext.Component.html#event-destroy">Component</a>.</div>
                </div>
                            <a name="event-disable"></a>
                <div class="mdetail alt">
                <h3>disable</i></h3>
                <code>public event disable</code>
                <div class="mdetail-desc">
                Fires after the component is disabled.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-disable" href="Ext.Component.html#event-disable">Component</a>.</div>
                </div>
                            <a name="event-enable"></a>
                <div class="mdetail">
                <h3>enable</i></h3>
                <code>public event enable</code>
                <div class="mdetail-desc">
                Fires after the component is enabled.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-enable" href="Ext.Component.html#event-enable">Component</a>.</div>
                </div>
                            <a name="event-hide"></a>
                <div class="mdetail alt">
                <h3>hide</i></h3>
                <code>public event hide</code>
                <div class="mdetail-desc">
                Fires after the component is hidden.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-hide" href="Ext.Component.html#event-hide">Component</a>.</div>
                </div>
                            <a name="event-move"></a>
                <div class="mdetail">
                <h3>move</i></h3>
                <code>public event move</code>
                <div class="mdetail-desc">
                Fires after the component is moved.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li><li><code>x</code> : Number<div class="sub-desc">The new x position</div></li><li><code>y</code> : Number<div class="sub-desc">The new y position</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by BoxComponent.</div>
                </div>
                            <a name="event-render"></a>
                <div class="mdetail alt">
                <h3>render</i></h3>
                <code>public event render</code>
                <div class="mdetail-desc">
                Fires after the component is rendered.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-render" href="Ext.Component.html#event-render">Component</a>.</div>
                </div>
                            <a name="event-resize"></a>
                <div class="mdetail">
                <h3>resize</i></h3>
                <code>public event resize</code>
                <div class="mdetail-desc">
                Fires after the component is resized.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li><li><code>adjWidth</code> : Number<div class="sub-desc">The box-adjusted width that was set</div></li><li><code>adjHeight</code> : Number<div class="sub-desc">The box-adjusted height that was set</div></li><li><code>rawWidth</code> : Number<div class="sub-desc">The width that was originally specified</div></li><li><code>rawHeight</code> : Number<div class="sub-desc">The height that was originally specified</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by BoxComponent.</div>
                </div>
                            <a name="event-show"></a>
                <div class="mdetail alt">
                <h3>show</i></h3>
                <code>public event show</code>
                <div class="mdetail-desc">
                Fires after the component is shown.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.Component<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.Component" ext:member="#event-show" href="Ext.Component.html#event-show">Component</a>.</div>
                </div>
                        </div>
                            <h2 class="mdetail-head">Config Details</h2>
            <div class="detail-wrap">
                            <a name="config-allowDomMove"></a>
                <div class="mdetail">
                <h3>allowDomMove</i></h3>
                <code>allowDomMove : Boolean</code>
                <div class="mdetail-desc">
                    Whether the component can move the Dom node when rendering (defaults to true).                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.Component" ext:member="#allowDomMove" href="Ext.Component.html#allowDomMove">Component</a>.</div>
                </div>
                            <a name="config-disableClass"></a>
                <div class="mdetail alt">
                <h3>disableClass</i></h3>
                <code>disableClass : String</code>
                <div class="mdetail-desc">
                    CSS class added to the component when it is disabled (defaults to "x-item-disabled").                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.Component" ext:member="#disableClass" href="Ext.Component.html#disableClass">Component</a>.</div>
                </div>
                            <a name="config-hideMode"></a>
                <div class="mdetail">
                <h3>hideMode</i></h3>
                <code>hideMode : String</code>
                <div class="mdetail-desc">
                    How this component should hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.Component" ext:member="#hideMode" href="Ext.Component.html#hideMode">Component</a>.</div>
                </div>
                        </div>
        
        </div>
    <hr>
    <div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>

    </body>
</html>